<template>
  <div class="bar side-bar" v-bind:class="side">
    <template v-for="(label,index) in labels">
      <div class="side-bar-label" v-bind:class="{ active: activeViewId === label.viewId }" @click="handleClick(label.viewId)">
        <div class='side-bar-label-container'>
          <div class='side-bar-label-content'>
            <i class="icon" :class="label.icon"></i>
            <span>{{label.text}}</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  import labels from './side-setting.js'

  export default {
    data: function () {
      return {
        labels: labels,
        activeViewId: 'FloderTree'
      }
    },
    props: {
      side: {
        type: String
      }
    },
    methods: {
      handleClick: function (viewId) {
        // console.log(viewId)
      }
    }
  }
</script>
